<template>
    <el-col :span="9">
        <div class="grid-content bg-purple">
            <h4>用户名</h4>
            <el-input
                placeholder="用户名"
                v-model="input"
                clearable>
            </el-input>
            <h4>评论内容</h4>
            <el-input
            type="textarea"
            :rows="7"
            placeholder="评论内容"
            v-model="textarea">
            </el-input>
            <el-button size="mini" round @click="handle">提交</el-button>
        </div>
    </el-col>
</template>

<script>
import {mapMutations} from "vuex"

export default {
    data(){
        return {
            input:"",
            textarea:"",
        }
    },
    methods:{
        handle(){
            const userName = this.input.trim()
            const comment = this.textarea.trim()
            if(userName && comment){
                const obj = {
                    id:Date.now() + Math.random(),
                    userName,
                    comment,
                }
                // this.$store.commit("ADD_COMMENT",obj)
                this.ADD_COMMENT(obj)
                this.input = ""
                this.textarea = ""
            }
        },
        ...mapMutations(["ADD_COMMENT"])
    }
}
</script>

<style>

</style>